<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:each="p:${product}">[[${p.name}]]</title>
    <link rel="icon" href="/images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/css/rester.css">
    <link rel="stylesheet" href="/css/iconfont-mall.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/detail.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/js/jquery1.12.4.min.js"></script>
    <script src="/js/utils.js"></script>
    <script src="/js/detail3.js"></script>
</head>
<body>
<!-- 头部 -->
<!-- header下面的top部分 -->
<th:block th:include="header"/>
<!-- 主体内容 -->
<div class="bigMask"></div>
<div class="model">
    <div class="m_title"><span>×</span></div>
    <p>商品添加成功！</p>
    <div class="bot">
        <span class="look">再逛逛</span>
        <span class="go">去结算</span>
    </div>
</div>
<p class="h5"></p>
<div id="main">
    <div class="container content clearfix">
        <div class="title" th:each="p:${product}">
            <a href="/" title="首页">首页</a>
            &nbsp;&gt;&nbsp;
            <a href="#" title="手机">手机</a>
            &nbsp;&gt;&nbsp;
            <a href="#" title="HUAWEI nova系列">HUAWEI 系列</a>
            &nbsp;&gt;&nbsp;
            <span>[[${p.name}]] 全网通 [[${p.edition}]]（[[${p.color}]]）</span>
        </div>
        <div class="pic">
            <div class="sImg">
                <img src="https://res.vmallres.com/pimages//product/6941487207169/800_800_AFC179E0F69ADCA5310E473170896895376AC63839325375mp.png" alt="">
                <div class="mask"></div>
                <div class="bigImg">
                    <img src="https://res.vmallres.com/pimages//product/6941487207169/800_800_AFC179E0F69ADCA5310E473170896895376AC63839325375mp.png" alt="">
                </div>
            </div>
            <div class="img_nav">
                <span class="left"><i class="iconfont icon-shangxiajiantou-copy1"></i></span>
                <div class="warp">
                    <ul>
                        <li class="current">
                            <img src="https://res.vmallres.com/pimages//product/6941487207169/78_78_AFC179E0F69ADCA5310E473170896895376AC63839325375mp.png" alt="">
                        </li>
                        <li>
                            <img src="https://res.vmallres.com/pimages//product/6941487207169/group//78_78_0736FBE4D336FC247D8D29BB8059EAC0790F3A9A700CE2F7.png" alt="">
                        </li>
                        <li>
                            <img src="https://res.vmallres.com/pimages//product/6941487207169/group//78_78_4928A8356201259FC4127E7EDE50DC476F1BA88C872B665E.png" alt="">
                        </li>
                        <li>
                            <img src="https://res.vmallres.com/pimages//product/6941487207169/group//78_78_FD7307719D12F57F3144731CFB7DFD2B04589F8FF447EBA1.png" alt="">
                        </li>
                        <li>
                            <img src="https://res.vmallres.com/pimages//product/6941487207169/group//78_78_BA8B6657B9000FADA9B26770E9CF277AF0807425D8EDC3BF.png" alt="">
                        </li>
                        <li>
                            <img src="https://res.vmallres.com/pimages//product/6941487207169/group//78_78_CD0A5516E7F857A50C7C0B31867123CDBFD161996C2D55B3.png" alt="">
                        </li>
                        <li>
                            <img src="https://res.vmallres.com/pimages//product/6941487207169/group//78_78_66F7C348EA47229CCA747DB9DF157BC39E586577868D7BEA.png" alt="">
                        </li>
                    </ul>
                </div>
                <span class="right"><i class="iconfont icon-shangxiajiantou-copy"></i></span>
            </div>
        </div>
        <div class="detail" th:each="p:${product}">
            <h1 class="pro-name">[[${p.name}]]</h1>
            <div class="product-slogan">
                <span class="time">10:08限时开售！</span>
                <span class="time">以旧换新最高补贴2021元</span>
            </div>
            <div class="product-info">
                <div class="price clearfix">
                    <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
                    <em><i>￥</i> <b>[[${p.price}]]</b></em>
                </div>
                <div class="promotion clearfix">
                    <span>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                    <em>赠送积分</em>
                    <div class="tag">购买即赠商城积分，积分可抵现~</div>
                </div>
            </div>
            <div class="h20"></div>
            <div class="description clearfix">
                <div class="left">服务说明</div>
                <div class="right">
                    <p><span>预计1月22日前发货</span> <em></em></p>
                    <ul>
                        <li><i class="iconfont icon-dui"></i>已满48元已免运费</li>
                        <li><i class="iconfont icon-dui"></i>由华为商城负责发货，并提供售后服务</li>
                    </ul>
                </div>
            </div>
            <div class="product-id">
                <span>商品编码</span>
                <em id="product-id">[[${p.id}]]</em>
            </div>
            <div class="p_h5"></div>
            <div class="line"></div>
            <div class="h-16"></div>
            <div class="product-color clearfix">
                <span>选择颜色</span>
                <ul>
                    <li class="current" th:each="p:${product}">
                        <img th:src="${p.imgPath}" alt="">
                        <span>[[${p.color}]]</span>
                    </li>
                </ul>
            </div>
            <div class="product-version clearfix">
                <span>选择版本</span>
                <ul>
                    <li class="current" th:each="p:${product}">
                        <span>5G全网通 [[${p.edition}]]</span>
                    </li>
                </ul>
            </div>
            <div class="product-package clearfix">
                <span>选择套餐</span>
                <ul>
                    <li class="current">
                        <span>官方标配</span>
                    </li>
                </ul>
            </div>
            <div class="product-sev clearfix">
                <span>保障服务</span>
                <ul>
                    <li>
                        <span>碎屏服务宝1年 ￥399 <i class="iconfont icon-shangxiajiantou"></i></span>
                    </li>
                    <li>
                        <span>延长服务宝1年 ￥168 <i class="iconfont icon-shangxiajiantou"></i></span>
                    </li>
                </ul>
            </div>
            <div class="selected clearfix">
                <span>已选择商品：</span>
                <p> [[${p.color}]]/ 5G全网通 [[${p.edition}]] / 官方标配 </p>
            </div>
            <div class="buy clearfix">
                <div class="num clearfix">
                    <input type="text" id="num" value="1">
                    <div class="right">
                        <div class="add">+</div>
                        <div class="cut">-</div>
                    </div>
                </div>
                <a th:if="${session.currentUser == null}" th:href="'/login/'">
                    <button class="btn">立即登录</button>
                </a>
                <a th:if="${session.currentUser != null}" href="">
                    <button class="btn" id="cart">加入购物车</button>
                </a>
            </div>
            <div class="tips clearfix">
                <span>温馨提示</span>
                <p>提前设置<a href="#">默认收货地址</a>，购买更顺利~</p>
            </div>
        </div>
    </div>
</div>
<div class="product-tab">
    <div class="container">
        <p><a href="#" class="current">商品详情</a><a href="#">规格参数</a><a href="#">包装与售后</a><a href="#">用户评价（999+）</a>
        </p>
    </div>
</div>

<th:block th:include="footer"/>
<script src="/layui/layui.js"></script>
<script th:inline:javascript>
    layui.use(["layer"], function () {
        var layer = layui.layer;
        var $ = layui.jquery;

        $("#cart").on("click",function (){
            var data = {};

            data.productId = [[${product.id}]];
            data.number = $("#num").val();
            $.post("/cart/save",data,function (){
                layer.msg("成功加入购物车");
            })
        });
    });
</script>
</body>
</html>
